<template>
    <NormalTable
        :refresh-action="'租箱明细查询'"
        :tableColumns="tableColumns"
        :tableAttribute="tableAttribute"
        :show-page="true"
        ref="childRef"
    >
    </NormalTable>
    <el-button-group class="bg">
        <el-space>
            <NormalBtn
                @click="onUpdate('U')"
                :text="'设置非协议费率'"
            ></NormalBtn>
            <NormalBtn
                @click="onUpdate('D')"
                :text="'删除非协议费率'"
            ></NormalBtn>
        </el-space>
    </el-button-group>
    <el-dialog
        v-model="dialogUpdateVisible"
        title="租箱费率维护"
        draggable
        destroy-on-close
        :center="true"
    >
        <LeaseRate @update-rate="handleUpdate"> </LeaseRate>
    </el-dialog>
</template>
<script setup lang="ts" name="CntrLeaseQuery">
import { ref, reactive, onMounted } from 'vue';
import { tableColumnDefault } from '@/hooks/useTable';
import type { TableColumn } from '@/common/types/app';
import { Request } from '@/app/request';
import { useAppStore } from '@/store/app';
import { transFormatter, formatDate } from '@/common/tools';
import NormalTable from '@/components/tables/NormalTable.vue';
import { storeToRefs } from 'pinia';
import { VCntrLeaseModel } from '@/common/types/container';
import { ElMessage, ElMessageBox } from 'element-plus';
import { forEach, forEachRight, includes } from 'lodash';
import LeaseRate from './LeaseRate.vue';
import { FeeRateModel } from '@/common/types/business';

const { cyCfs, SelectOptionYN, client, currency } = storeToRefs(useAppStore());
const tableAttribute = ref({
    id: 'cntrleasequery-table-cntrleasequery',
});
const childRef = ref<InstanceType<typeof NormalTable>>();
const dialogUpdateVisible = ref(false);
const onFormatter = (_row: any, column: any, cellValue: any) => {
    let data: { value: string | number; label: string }[];
    if (column['property'] === 'out_cfs') {
        data = cyCfs.value;
    } else if (column['property'] === 'back_cfs') {
        data = cyCfs.value;
    } else if (column['property'] === 'finish_id') {
        data = SelectOptionYN.value;
    } else if (column['property'] === 'cntr_corp_cod') {
        data = client.value;
    } else if (column['property'] === 'currency_cod') {
        data = currency.value;
    } else {
        return cellValue;
    }

    return transFormatter(cellValue, data);
};
const tableColumns = reactive<TableColumn[]>([
    {
        ...tableColumnDefault,
        order: 1,
        prop: 'cntr',
        label: '箱号',
        // fixed: 'left',
        width: 150,
    },
    {
        ...tableColumnDefault,
        order: 2,
        prop: 'cntr_siz_cod',
        label: '尺寸',
        // fixed: 'left',
        width: 100,
    },
    {
        ...tableColumnDefault,
        order: 3,
        prop: 'cntr_typ_cod',
        label: '箱型',
        width: 100,
    },
    {
        ...tableColumnDefault,
        order: 4,
        prop: 'lease_sn',
        label: '起租计划号',
        width: 200,
    },
    {
        ...tableColumnDefault,
        order: 5,
        prop: 'plan_name',
        label: '起租计划名称',
        width: 200,
    },
    {
        ...tableColumnDefault,
        order: 6,
        prop: 'out_date',
        label: '起租时间',
        formatter: formatDate,
        formFieldItemType: 'date',
        width: 250,
    },
    {
        ...tableColumnDefault,
        order: 7,
        prop: 'out_cfs',
        label: '起租站点',
        formatter: onFormatter,
        sortable: 'custom',
        formFieldItemType: 'single',
        optionalValues: cyCfs.value,
        width: 150,
    },

    {
        ...tableColumnDefault,
        order: 8,
        prop: 'free_days',
        label: '免费天数',
        width: 150,
    },
    {
        ...tableColumnDefault,
        order: 9,
        prop: 'currency_cod',
        label: '货币',
        formatter: onFormatter,
        sortable: 'custom',
        formFieldItemType: 'single',
        optionalValues: currency.value,
        width: 150,
    },
    {
        ...tableColumnDefault,
        order: 10,
        prop: 'day_rate',
        label: '费率',
        width: 150,
    },
    {
        ...tableColumnDefault,
        order: 11,
        prop: 'out_truck_no_c',
        label: '起租车号',
        width: 150,
    },
    {
        ...tableColumnDefault,
        order: 12,
        prop: 'out_driver_tel',
        label: '起租司机电话',
        width: 150,
    },
    {
        ...tableColumnDefault,
        order: 13,
        prop: 'cntr_corp_cod',
        label: '客户',
        formatter: onFormatter,
        sortable: 'custom',
        formFieldItemType: 'single',
        optionalValues: client.value,
        width: 150,
    },
    {
        ...tableColumnDefault,
        order: 14,
        prop: 'bill_no',
        label: '放箱号',
        width: 100,
    },
    {
        ...tableColumnDefault,
        order: 15,
        prop: 'rent_sn',
        label: '退租计划号',
        width: 200,
    },
    {
        ...tableColumnDefault,
        order: 16,
        prop: 'back_date',
        label: '退租日期',
        formatter: formatDate,
        width: 200,
    },
    {
        ...tableColumnDefault,
        order: 17,
        prop: 'back_cfs',
        label: '退租站点',
        formatter: onFormatter,
        sortable: 'custom',
        formFieldItemType: 'single',
        optionalValues: cyCfs.value,
        width: 150,
    },
    {
        ...tableColumnDefault,
        order: 18,
        prop: 'back_truck_no_c',
        label: '退租车号',
        width: 150,
    },
    {
        ...tableColumnDefault,
        order: 19,
        prop: 'back_driver_tel',
        label: '退租司机电话',
        width: 150,
    },
    {
        ...tableColumnDefault,
        order: 20,
        prop: 'remark',
        label: '备注',
        width: 100,
    },
]);
// let queryWhere = {};
onMounted(() => {});
const onUpdate = async (kind: string) => {
    const rows: Array<VCntrLeaseModel> =
        childRef.value?.tableRef?.getSelectionRows() || []; 
    if (rows.length === 0) {
        ElMessage.info({
            message: '请选择要修改数据',
        });
        return;
    }
    const ids = Array<number>();

    forEach(rows, (v: VCntrLeaseModel) => {
        ids.push(v.id as number);
    });

    if (kind === 'U') {
        // 修改费率
        dialogUpdateVisible.value = true;
    } else {
        const rows: Array<VCntrLeaseModel> =
            childRef.value?.tableRef?.getSelectionRows() || [];
        if (rows.length === 0) {
            ElMessage.info({
                message: '请选择要修改数据',
            });
            return;
        }
        const ids = Array<number>();

        forEach(rows, (v: VCntrLeaseModel) => {
            ids.push(v.id as number);
        });
        const req = new Request('起租箱费率清除', {
            ids,
        });
        const r = await req.post();
        if (r.code > 100) {
            forEachRight(
                childRef.value?.tableData,
                (v: VCntrLeaseModel, i: number) => {
                    if (includes(ids, v.id)) {
                        v.free_days = undefined;
                        v.day_rate = undefined;
                        v.currency_cod = undefined;
                    }
                },
            );
        }
    }
};
const handleUpdate = async (rate: FeeRateModel) => {
    console.log('新费率', rate);
    if (rate) {
        const rows: Array<VCntrLeaseModel> =
            childRef.value?.tableRef?.getSelectionRows() || [];
        if (rows.length === 0) {
            ElMessage.info({
                message: '请选择要修改数据',
            });
            return;
        }
        const ids = Array<number>();

        forEach(rows, (v: VCntrLeaseModel) => {
            ids.push(v.id as number);
        });
        const req = new Request('起租箱费率修改', {
            ids,
            day_rate: rate.day_rate,
            currency_cod: rate.currency_cod,
        });
        const r = await req.post();
        if (r.code > 100) {
            forEachRight(
                childRef.value?.tableData,
                (v: VCntrLeaseModel, i: number) => {
                    if (includes(ids, v.id)) {
                        v.day_rate = rate.day_rate;
                        v.currency_cod = rate.currency_cod;
                    }
                },
            );
            dialogUpdateVisible.value = false;
        }
    }
};
</script>
<style lang="scss" scoped>
.bg {
    margin-top: 10px;

    .btn {
        margin-right: 10px;
    }
}

.page {
    float: right;
    margin-top: 10px;
}
</style>
